<!-- 用户数据 -->
<template>
    <!-- 第一行数据 -->
    <el-row :gutter="28">
        <el-col :span="6">
            <div class="grid-content ep-bg-purple mains">
                <div class="header-title">用户数据 <span>更新时间:2022/10/11</span></div>
                <div class="header-nei">
                    <img src="../../../img/用户数据/付款总额.png" alt="" class="header-nei-img">
                    <div class="header-nei-shu">
                        <div class="header-nei-biao">付款总额</div>
                        <div class="header-nei-zhu">￥<span>5006.32</span></div>
                        <div class="header-nei-bi"> <span class="header-nei-bis"></span></div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple mains">
                <div class="header-nei">
                    <img src="../../../img/用户数据/订单.png" alt="" class="header-nei-img">
                    <div class="header-nei-shu">
                        <div class="header-nei-biao">订单数</div>
                        <div class="header-nei-zhu"><span>734</span></div>
                        <div class="header-nei-bi1"> +6% <span class="header-nei-bis"> 同比上月</span></div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple mains">
                <div class="header-nei">
                    <img src="../../../img/用户数据/付款总额.png" alt="" class="header-nei-img">
                    <div class="header-nei-shu">
                        <div class="header-nei-biao">开播场次</div>
                        <div class="header-nei-zhu"><span>201</span></div>
                        <div class="header-nei-bi2">+10% <span class="header-nei-bis"> 同比昨天</span></div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content ep-bg-purple mains">
                <div class="header-nei">
                    <img src="../../../img/用户数据/开播.png" alt="" class="header-nei-img">
                    <div class="header-nei-shu">
                        <div class="header-nei-biao">观看总人数</div>
                        <div class="header-nei-zhu"><span>48.6</span>w</div>
                        <div class="header-nei-bi3"> +3% <span class="header-nei-bis"> 同比昨日</span></div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>

    <!-- 第二行数据 -->
    <listw />
</template>
<script lang="ts" setup>
import listw from "./comp/index.vue";

</script>

<style lang="less" scoped>
.el-main {
    background-color: #999999;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
    height: 25%;
}


.mains {
    border-radius: 6px;
    min-height: 36px;
    height: 340px;
    background-color: #fff;
    position: relative;


    .header-title {
        color: #333333;
        width: 100%;
        font-size: 16px;
        font-weight: 600;
        position: absolute;
        top: 20px;
        left: 40px;

        span {
            font-size: 12px;
            color: #999999;
        }
    }

    .header-nei {
        position: absolute;
        top: 30%;
        left: 15%;
        display: flex;

        .header-nei-img {
            margin-top: 15px;
            width: 80px;
            height: 80px;
        }

        .header-nei-shu {
            margin-left: 20px;

            .header-nei-biao {
                font-size: 18px;
                color: #999999;
            }

            .header-nei-zhu {
                margin: 20px 0;
                font-size: 14px;
                color: #333333;
                font-weight: 800;
                font-family: Microsoft YaHei;

                span {
                    font-size: 32px;
                }
            }

            .header-nei-bi1 {
                color: #ffb100;
                font-size: 16px;
            }

            .header-nei-bi2 {
                color: #ff0100;
                font-size: 16px;
            }

            .header-nei-bi3 {
                color: #1acb1b;
                font-size: 16px;
            }

            .header-nei-bis {
                color: #afafaf;
                font-size: 16px;
            }

        }
    }
}


</style>